<template>
	<view>
		<view class="list-top">
			<view class="left-icon">
				<image v-if="itemInfo.devicePicture" :src="itemInfo.devicePicture"></image>
				<image v-if="!itemInfo.devicePicture" src="../../../static/images/index/weibaorenwu.png" mode="">
				</image>
			</view>
			<view class="right-txt">
				<view class="txt1">{{itemInfo.deviceNum+'——'+itemInfo.deviceName}}</view>
				<view class="txt2">
					设备型号：{{itemInfo.modelName}}
				</view>
				<view class="txt2">设备类型：{{itemInfo.deviceTypeName}}</view>
			</view>
		</view>
		<view class="list-title">
			备件使用列表
		</view>

		<view class="list-item" v-for="(item,index) in list" :key="index">
			<view class="left-icon">
				<!-- <image :src="item.partPicture!=''?item.partPicture:defaultIcon"></image> -->
				<image v-if="item.partPicture" :src="item.partPicture"></image>
				<image v-if="!item.partPicture" src="../../../static/images/index/beijian.png" mode=""></image>
			</view>
			<view class="right-txt">
				<view class="txt1">{{item.partNum+'——'+item.partName}}</view>
				<view class="txt3">
					<!-- 	<view>{{item.partTypeName}}</view><view>使用数量：{{item.totalAmount}}</view> -->
					<view style="width:200rpx;">{{item.partTypeName}}</view>
					<view style="width:200rpx; margin-left: 20rpx;text-align: right;">使用数量：<text
							class="numColor">{{item.totalAmount}}</text></view>
				</view>
				<view class="txt2">总价值：<text
						class="numColor">{{(item.totalMoney==0||item.totalMoney=='')?'0':item.totalMoney}}元</text>
				</view>
			</view>
		</view>
		<view class="empty-data" v-if="list.length==0">
			<u-empty mode="data" :marginTop="100"></u-empty>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderNum: '',
				itemInfo: {},
				list: [],
				defaultIcon: '../../../static/images/index/saoma.png'
			}
		},
		onLoad(options) {
			this.itemInfo = JSON.parse(decodeURIComponent(options.info));
			this.orderNum = options.orderNum;
			this.getList();
		},
		methods: {
			getList() {
				uni.$u.http.get(`/device/mobile/deviceInfo/partUsageListByOrderNum/${this.orderNum}`).then(res => {
					if (res.code == 0) {
						this.list = res.data;
					}
				}).catch(err => {})
			}

		}
	}
</script>

<style lang="scss">
	page {

		background: #ffffff;

	}

	.list-top {
		display: flex;
		// align-items: center;
		padding: 32rpx;
		background: #fff;
		height: 200rpx;

		.left-icon {
			border-radius: 8rpx;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 8rpx;

			}
		}

		.right-txt {
			padding-left: 32rpx;
			height: 200rpx;
			display: flex;
			justify-content: space-between;
			flex-flow: column;

			.txt1 {
				// width: 400rpx;
				font-size: 17px;
				font-weight: 400;
				color: #2B2B2B;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				word-break: break-all;
			}

			.txt2 {
				color: #8c8c8c;
				font-size: 14px;
				font-weight: 400;
				margin: 10rpx 0;
			}
		}
	}

	.list-title {
		font-size: 17px;
		font-weight: 400;
		color: #2b2b2b;
		padding: 28rpx 32rpx;
		background: #F5F5F5;
	}

	.list-item {
		display: flex;
		// align-items: center;
		padding: 32rpx;
		max-height: 166rpx;
		background: #fff;
		border-bottom: 1px solid #f5f5f5;

		.left-icon {
			border-radius: 8rpx;

			image {
				width: 152rpx;
				height: 152rpx;

			}
		}

		.right-txt {
			padding-left: 32rpx;
			width: 100%;
			height: 152rpx;
			display: flex;
			justify-content: space-between;
			flex-flow: column;

			.txt1 {
				font-size: 16px;
				font-weight: 400;
				color: #2B2B2B;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				word-break: break-all;
			}

			.txt2 {
				color: #8c8c8c;
				font-size: 14px;
				font-weight: 400;
				margin: 10rpx 0;
			}

			.txt3 {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 10rpx 0;
				color: #8c8c8c;
				font-size: 14px;
				font-weight: 400;
			}
		}
	}

	// .list-item:last-child {
	// 	border-bottom: none;
	// }

	.my-noList {
		color: #c0c4cc;
		font-size: 14px;
	}

	.numColor {
		color: #2B2B2B;
	}
</style>